import React, {Component} from 'react';
// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
//调用出现随机ID
import {nanoid} from 'nanoid'
import {addPeronAction} from '../../redux/actions/person'

class person extends Component {
    addPerson = () =>{
        const name = this.name.value
        const age = this.age.value
        const personObj ={id:nanoid(),name,age}
        this.props.jiaYiren(personObj)
        this.name.value = ''
        this.age.value = ''
    }
    render() {
        return (
            <div>
                <h2>person,上方和为{this.props.he}</h2>
                <input ref={item=>this.name=item} type="text" placeholder="输入姓名"></input>
                <input ref={item=>this.age=item} type="text" placeholder="输入年龄"></input>
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {this.props.yiduiren.map((item)=>{
                        return <li key={item.key}>姓名：{item.name}--年龄：{item.age}</li>
                    })}
                </ul>
            </div>
        );
    }
}

export default connect(
    state=>({yiduiren:state.allPerson,he:state.he}),//映射状态
    {jiaYiren:addPeronAction}//映射状态的方法（action）
)(person);